<template>
  <div>
    <h2>用户列表</h2>
    <el-input v-model="searchText" placeholder="请输入用户名" width="150"></el-input>
    <el-button @click="fetchUserList()">搜索</el-button>
    <el-table :data="users" border>
      <el-table-column prop="id" label="用户ID" width="100"></el-table-column>
      <el-table-column
          label="用户名"
          prop="username"
          width="150"
      ></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button round type="warning" @click="editUser(scope.row)">编辑</el-button>
          <el-button round type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible">
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getUserList, updateUser, deleteUser, searchUser} from "@/api/user";

export default {
  name: "UserList",
  data() {
    return {
      users: [],
      searchText: "",
      editDialogVisible: false,
      editForm: {
        id: "",
        username: "",
        email: "",
      },
    };
  },
  mounted() {
    this.fetchUserList();
  },
  methods: {
    fetchUserList() {
      // console.log(this.searchText.type);
      getUserList(decodeURIComponent(this.searchText))
          .then((response) => {
            this.users = response.data;

          })
          .catch((error) => {
            console.error("Failed to fetch user list:", error);
          });
    },
    editUser(user) {
      this.editForm.id = user.id;
      this.editForm.username = user.username;
      this.editForm.email = user.email;
      this.editDialogVisible = true;
    },
    updateUser() {
      // console.log(this.editForm);
      updateUser(this.editForm)
          .then(() => {
            this.editDialogVisible = false;
            this.fetchUserList()
          })
    },
    // searchUser() {
    //   getUserList(this.searchText)
    //   .then((response) => {
    //     this.users = response.data;
    //     // console.log(response.data);
    //   })
    // },
    deleteUser(userId) {
      this.$confirm("确认删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            deleteUser(userId)
                .then(() => {
                  this.fetchUserList();
            })
            .catch((error) => {
              console.error("Failed to delete user:", error);
            });
        })
        .catch(() => {
          // 取消删除
        });
    },
  },
};
</script>
